你可能不清楚的 Vue Router 深度用法（二）

此为 Vue Router 深度用法的第二篇，主要讲述动态路由匹配用法。第一篇的链接在此： https://segmentfault.com/a/11...

动态路由匹配是用于把某种模式匹配到的所有路由，全都映射到同个组件。通过给路由路径一个变量，即变成动态路由，把变化的内容赋值给变量即可。

例如文章详情页是一个组件，只有一个路由，从文章列表页点进来，变化的只是文章 id 而已。将其赋予给设定的变量，然后通过在组件里 watch $route 或者使用 beforeRouteUpdate 导航守卫监测路由变化，传递新的文章 id 获取文章详情即可。在组件里，可以通过
this.$route.params.xx
获取当前文章 id。

一个路由地址可以设置多个变量，适合有分叉情况的内容。例如 path: '/params/:foo/:bar'

从文章列表页点进来即传递路由变量，有三种方法：

（1）<router-link to="/params/list/1">跳转到 /params/list/1</router-link>
（2）this.$router.push({ name: 'articles', params: { foo: 'list', bar: 1 } })
（3）this.$router.push({ path: '/params/list/1' }) // path 不能与 params 同时使用

高级匹配模式

这里主要研究的是动态路由匹配的高级匹配模式，以达到合并差异不大的路由、减少路由数量的目的。

高级匹配即结合简单的正则匹配方法，给予路由更多的限制和操作空间。

1、可选路由参数

路由参数可选，添加与否都对应同一个组件。可以在组件里使用 v-if / v-show 结合 $route.params.xx 展现不同的内容

// a param can be made optional by adding "?"
{ path: '/optional-params/:foo?' }

// 这两个链接都对应同个组件
<li><router-link to="/optional-params">/optional-params</router-link></li>
<li><router-link to="/optional-params/foo">/optional-params/foo</router-link></li>

2、精确匹配参数

只有参数通过正则匹配，完全符合格式，才能会跳转。例如只有参数是数字/手机号才允许跳转。适用于对第三方不规范格式的数据进行筛选。

// a param can be followed by a regex pattern in parens
// this route will only be matched if :id is all numbers
{ path: '/params-with-regex/:id(\\d+)' }
// 只匹配数字
<li><router-link to="/params-with-regex/123">/params-with-regex/123</router-link></li>

// 只匹配手机号
{ path: '/params-with-regex/:id(^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$)' }
<li><router-link to="/params-with-regex/13800138000">/params-with-regex/13800138000</router-link></li>

3、匹配任意参数

不对参数格式、数量进行限制，任意参数都可。

// asterisk can match anything
{ path: '/asterisk/*' }

// 这两个都是同一组件
<li><router-link to="/asterisk/foo">/asterisk/foo</router-link></li>
<li><router-link to="/asterisk/foo/bar">/asterisk/foo/bar</router-link></li>

4、部分可选参数

结合可选路由参数与多路由参数，其中一部分参数可选。适用于分叉情况下不确定参数数量的情况。

// make part of the path optional by wrapping with parens and add "?"
{ path: '/optional-group/(foo/)?bar' }

// 这两个都是同一组件
<li><router-link to="/optional-group/bar">/optional-group/bar</router-link></li>
<li><router-link to="/optional-group/foo/bar">/optional-group/foo/bar</router-link></li>